<template>
  <div class="set-head-portrait">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>更换头像</span>
        </div>
      </template>
      <div class="content-box">
        <img v-if="avatar" class="cover-img" :src="avatar" alt="" />
        <img
          v-else
          class="cover-img"
          src="../assets/images/add_img.jfif"
          alt=""
        />

        <div>
          <input type="file" ref="iptFileRef" @change="getFile" />
          <el-button type="primary" @click="selCoverFn">
            <el-icon><Plus /></el-icon>
            选择图片
          </el-button>
          <el-button type="success" @click="upload">
            <el-icon><Upload /></el-icon>
            上传头像
          </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, computed } from "vue";
import store from "../store";
import qs from "qs";
import { setHeadPortraitRequest } from "../api/user";
import { ElMessage } from "element-plus";

// const avatar = ref("");
const instance = getCurrentInstance();
const iptFileRef = ref();
// 原来的头像
const avatar = computed(() => {
  return store.state.userinfo.user_pic;
});
// 选择头像的点击事件
const selCoverFn = () => {
  // 固定写法
  instance?.refs.iptFileRef.click();
};
// 用户选择了头像文件
const getFile = e => {
  const files = e.target.files;
  if (files.length === 0) {
    // 用户没有选择图片, 把图片属性置空
    avatar.value = "";
  } else {
    // 目标: 选择图片文件, 要给到img标签上做前端预览
    // img标签的src属性的值
    // 只能是图片的"链接地址"(外链地址, 或图片文件路径)
    // 或者是图片的base64字符串
    // 解决方案1: 文件 -> 内存临时地址(这个地址只能在js内存里不能发给后端)
    // 语法: URL.createObjectURL(文件)
    // 返回值: 内存临时地址
    // avatar.value = URL.createObjectURL(files[0])

    // 解决方案2: 文件 -> base64字符串(此字符串可以发给后端)
    // 1. 创建 FileReader 对象
    const fr = new FileReader();
    // 2. 调用 readAsDataURL 函数, 读取文件内容
    fr.readAsDataURL(files[0]);
    // 3. 监听 fr 的 onload 事件
    fr.onload = e => {
      // 4. 通过 e.target.result 获取到读取的结果, 值是字符串(base64 格式的字符串)
      avatar.value = e.target.result;
    };
  }
};
// 上传头像
const upload = async () => {
  const params = qs.stringify({
    avatar: avatar.value,
  });
  const { data: res } = await setHeadPortraitRequest(params);
  const { status, message } = res;
  if (status !== 0) ElMessage.error(message);
  ElMessage.success(message);
  // 重新获取用户信息
  store.dispatch("getUserinfoRequest");
};
</script>

<style lang="scss" scoped>
.content-box {
  .cover-img {
    display: block;
    margin-bottom: 24px;
    width: 400px;
    height: 280px;
    object-fit: cover;
  }

  input {
    display: none;
  }
}
</style>
